<script lang="ts" setup>
interface menu {
    index:string
    menuname:string
    icon?:string,
    children?:menu[]
}
defineProps<{
    menus:menu[]
}>()
const expand = defineModel('expand')
import { tabsStore } from '@/store';
const tabsstore = tabsStore()
</script>

<template>
    <el-menu router :collapse="expand" style="border: none;" :collapse-transition="false">
        <template v-for="menu in menus">
            <el-sub-menu v-if="menu.children"  :index="menu.index">
                <template #title>
                    <el-icon>
                        <component :is="menu.icon"></component>
                    </el-icon>
                    <span>{{ menu.menuname }}</span>
                </template>
                <el-menu-item v-for="item in menu.children" :index="item.index" @click="tabsstore.toRouter(item.index)">
                    {{ item.menuname }}
                </el-menu-item>    
            </el-sub-menu>
            <el-menu-item v-if="!menu.children" :index="menu.index" @click="tabsstore.toRouter(menu.index)">
                <el-icon>
                    <component :is="menu.icon"></component>
                </el-icon>
                <span>{{ menu.menuname }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<style>
</style>